import React, { useEffect, useState } from 'react'
import { PageHeader, Descriptions } from 'antd';
import axios from 'axios';
import moment from 'moment'
import { HeartTwoTone } from '@ant-design/icons';
export default function Detail(props) {
    const [newsInfo, setNewsInfo] = useState(null)
    // 获取当前新闻的相关信息
    useEffect(() => {
        axios.get(`/news/${props.match.params.id}?_expand=category&_expand=role`).then(res => {
            setNewsInfo({
                ...res.data,
                view:res.data.view+1
            })
            return res.data
        }).then(res=>{
            axios.patch(`/news/${props.match.params.id}`,{
                view: res.view+1
            })
        })
    }, [props.match.params.id])

    // 点赞事件
    const handleStar=()=>{
        setNewsInfo({
            ...newsInfo,
            star:newsInfo.star+1
        })
        axios.patch(`/news/${props.match.params.id}`,{
            view: newsInfo.star+1
        })
    }
    return (
        <div>
            {
                newsInfo && <div>
                    {/* 详细信息区域 */}
                    <PageHeader
                        style={{ backgroundColor: "#ffffff" }}
                        onBack={() => window.history.back()}
                        title={newsInfo?.title}
                        subTitle={<div>
                            {newsInfo.category.title}
                            <HeartTwoTone style={{marginLeft:'15px'}} twoToneColor="#eb2f96" 
                            onClick={()=>handleStar()}/>
                        </div>}
                    >
                        <Descriptions size="small" column={3}>
                            <Descriptions.Item label="创建者">{newsInfo.author}</Descriptions.Item>
                            <Descriptions.Item label="发布时间">
                                {newsInfo.publishTime ? moment(newsInfo.publishTime).format("YYYY/MM/DD HH:mm:ss") : '-'}
                            </Descriptions.Item>
                            <Descriptions.Item label="区域">{newsInfo.region}</Descriptions.Item>
                            <Descriptions.Item label="访问数量">
                                {newsInfo.view}
                            </Descriptions.Item>
                            <Descriptions.Item label="点赞数量">{newsInfo.star}</Descriptions.Item>
                            <Descriptions.Item label="评论数量">0</Descriptions.Item>
                        </Descriptions>
                    </PageHeader>
                    {/* 内容文本区域 */}
                    <div style={{
                        padding: '10px',
                        backgroundColor: '#ffffff'
                    }}>
                        
                        <div dangerouslySetInnerHTML={{
                            __html: newsInfo.content
                        }} style={{
                            border: '1px solid #aebacc',
                            padding:'10px'
                        }}>
                        </div> 
                    </div>
                    {/* 渲染成html格式 */}

                </div>
            }
        </div>
    )
}
